<template>
    <a-modal v-model:open="showModal" class="common-modal-root" :footer="null" :title="title" :mask-closable="maskClosable" :close-on-esc="closeOnEsc" @afterLeave="emits('afterLeave')">
        <template v-if="slots.header" #header>
            <slot name="header" />
        </template>
        <slot name="default" />
        <template v-if="slots.footer" #footer>
            <slot name="footer" />
        </template>
    </a-modal>
</template>
<script setup lang="ts">
import { nextTick, ref, useSlots } from 'vue'
defineProps({
    title: { type: String, default: '' },
    width: { type: String, default: '600px' },
    headerStyle: { type: String, default: 'padding: 27px 40px;' },
    contentStyle: { type: String, default: 'margin:0;border: 0;padding: 0 40px 27px;' },
    footerStyle: { type: String, default: 'margin:0;border: 0;padding: 0 40px 27px;' },
    maskClosable: { type: Boolean, default: true },
    closeOnEsc: { type: Boolean, default: true },
})
const emits = defineEmits(['afterLeave', 'modalOnMounted'])
const slots = useSlots()

const showModal = ref(false)

function Show() {
    showModal.value = true
    nextTick(() => {
        emits('modalOnMounted')
    })
}

function Hide() {
    showModal.value = false
}

defineExpose({ Show, Hide })
</script>
<style scoped lang="scss"></style>
